<template>
    <view class="box">
        <view>
            <view class="title">商家余额</view>
            <view class="list" v-for="(item, index) in list" :key="index">
                <view class="list-box">
                    <view class="list-item">
                        <view>
                            <image class="list-img" src="../../../static/logo1.jpg"></image>
                        </view>
                        <view class="list-content">
                            <view style="font-size: 30rpx; padding: 10rpx 0">辻粤味余额</view>
                            <view style="font-size: 40rpx; color: red">{{ item.amount }}元</view>
                        </view>
                    </view>
                    <view class="instructions">仅辻粤味设备可用</view>
                </view>
            </view>
        </view>
        <view class="code" v-if="total == 0">
            <view class="show-code">余额充值功能仍在奋力开发中，若您想要此功能，来小米帮您催促程序小哥哥努力开发</view>
            <view @click="show" style="font-size: 30rpx" class="show">我想要余额充值功能</view>
        </view>
    </view>
</template>
<script>
    import appconf from "@/common/appconf.js";
    const domain = appconf.domain;
    export default {
        data() {
            return {
                list: [],
                total: "",
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                let data = {
                    userId: uni.getStorageSync("userId"),
                    pageNo: 1,
                    pageSize: 10,
                };
                this.$request(
                    this.$api.prepaidAccount,
                    data,
                    "get",
                    true,
                    "application/x-www-form-urlencoded"
                ).then((res) => {
                    if (res.code == 200) {
                        this.list = res.result.records.map((item) => {
                            return {
                                amount: item.amount / 100,
                            };
                        });
                        console.log(41, this.list);
                        this.total = res.result.total;
                        console.log("total", this.total);
                    } else if (res.code == 500) {}
                });
            },
            show() {
                uni.showToast({
                    title: "来小米收到啦~感谢您的反馈",
                });
            },
        },
    };
</script>
<style>
    page {
        background-color: #eae8e8;
    }

    .box {
        margin: 30rpx;
    }

    .title {
        font-size: 30rpx;
    }

    .list {
        background-color: #fff;
        margin: 10rpx 0;
        width: 100%;
    }

    .list-box {
        padding: 25rpx;
    }

    .list-item {
        display: flex;
        align-items: center;
    }

    .list-img {
        width: 202rpx;
        height: 120rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .list-content {
        border-bottom: 0.5px dashed;
        display: flex;
        flex-direction: column;
        margin-left: 30rpx;
        width: 100%;
        padding-bottom: 10rpx;
    }

    .instructions {
        margin-top: 20rpx;
        display: flex;
        justify-content: flex-end;
    }

    .code {
        margin: 30rpx;
    }

    .show {
        font-size: 49rpx;
        margin: 60rpx;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .show-code {
        font-size: 30rpx;
    }
</style>